<template>
	<view class="main">
		<navbar :title="$t('common.details')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view class="main-box" v-if="level">
			{{$t('team.profile', {level: lvNumber[level]})}}
		</view>
		<view class="main-box u-flex u-row-between" v-else>
			<view>{{$t('team.mylevel')}}</view>
			<view>{{$levelArr[userInfo.level]}}</view>
		</view>
		<view class="main-box">
			<view class="header">
				<view class="circle"></view>
				<view class="title">
					{{$t('team.distribution')}}
				</view>
			</view>
			<view class="item-box">
				<view v-for="(item, index) in distribution">
					<view class="my-line" v-if="item.level == userInfo.level">
						<view class="me-icon">
							{{$t('common.me',{level: $levelArr[userInfo.level]})}}
						</view>
					</view>
					<view class="item item-line">
						<view class="level">{{$levelArr[item.level]}}</view>
						<view style="flex:1;">
							<view class="progress-line" :style="{width: (parseFloat(item.value)/distributionMax)*100 + '%', backgroundColor: color[item.level]}">
								<view class="person-icon" :style="{backgroundColor: color[item.level]}">
									{{item.value}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main-box">
			<view class="header">
				<view class="circle"></view>
				<view class="title">
					{{$t('team.unearned')}}
				</view>
			</view>
			<view class="item-box">
				<view v-if="userInfo.level == 8" style="color:#AAAAAA;font-size:36rpx;">
					{{ $t("team.maximumlevel")}}
				</view>
				<template v-else>
					<view v-for="(item, index) in unearned">
						<view class="item item-line">
							<view class="level">{{$levelArr[item.level]}}</view>
							<view style="flex:1;">
								<view class="progress-line" :style="{width: (parseFloat(item.commission)/unearnedMax)*100 + '%', backgroundColor: color[item.level]}">
									<view class="person-icon" :style="{backgroundColor: color[item.level]}">
										{{item.commission}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="my-line">
					</view>
					<view class="u-flex u-row-between">
						<view style="font-size:32rpx;color:#65676B;">
							{{$t('common.total')}}
						</view>
						<view style="font-size:34rpx;color:#0F0F0E;">
							{{$currency}}{{unearnedTotal}}
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="main-box">
			<view class="header">
				<view class="circle"></view>
				<view class="title">
					{{$t('team.after')}}
				</view>
			</view>
			<view class="item-box">
				<view v-if="userInfo.level == 8" style="color:#AAAAAA;font-size:36rpx;">
					{{ $t("team.maximumlevel")}}
				</view>
				<template v-else>
				<view v-for="(item, index) in after">
					<view class="item">
						<view class="level">{{$levelArr[item.level - 1]}}</view>
						<image class="level" src="@/static/image/team/arrow-icon.png" style="width:85rpx;height:32rpx;" mode="" />
						<view class="level">{{$levelArr[item.level]}}</view>
						<view style="flex:1;text-align:end;">{{$currency}}{{item.commission}}</view>
					</view>
				</view>
				<view class="my-line">
				</view>
				<view class="u-flex u-row-between" style="margin-top:20rpx;">
					<view style="width:300rpx;">
						<overbtn :btnText="$t('team.memberlevel')" @btnAction="navTo('/pages/member/member')" :fontSize="30" :propStyle="{borderRadius:'10rpx',width:'400rpx', height: '90rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
					</view>
					<view style="width:300rpx;">
						<overbtn :btnText="$t('pay.TOP')" @btnAction="navTo('/pages/pay/pay')" :fontSize="30" :propStyle="{borderRadius:'10rpx',width:'400rpx', height: '90rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
					</view>
				</view>
				</template>
			</view>
		</view>
		<view class="main-box" v-if="level">
			<view class="header">
				<view class="circle"></view>
				<view class="title">
					{{$t('team.list')}}
				</view>
			</view>
			<view >
				<mescroll-body ref="mescrollRef" @up="upCallback" @init="mescrollInit" @down="downCallback"
			:down="downOption" :up="upOption">
				<mteam :listProp="list" :leftValue="'commission'" :rightValue="'count_today_commission'"></mteam>
				</mescroll-body>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		childlevel,
		childlevelsurpass,
		childlevelsurpasss,
		childleveltotal,
		childlevelsurpasstotal,
		childlevelsurpassstotal,
		myteamlist
	} from '@/api/team.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
	export default{
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				level: null,
				type: null,
				data:[
					0,89,12,45,67,89,100,39
				],
				distribution: [],
				distributionMax: 1,
				unearned: [],
				unearnedTotal: 0,
				unearnedMax: 1,
				after: [],
				list: [],
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
				color: ['#000','#7289B3','#E38933','#4A99E6','#D66A56','#B6795B', '#5D71AE', '#AF8239', '#6A54E5', '#FF9200', '#3E342B', '#00BD4F', '#FF230F'],
				lvNumber: ['-','A','B','C'],
			}
		},
		onLoad(option) {
			this.level = option.level;
			this.type = option.type;
			this.load();
			// if (this.level) {
			// 	this.loadTeamList();
			// }
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {}
			}
		},
		methods: {
			async upCallback(page) {
				let result = await myteamlist({
					level: this.level,
					page: page.num,
				})
				if (page.num == 1) this.list = []
				this.list = this.list.concat(result)
				let curPageLength = result.length
				this.mescroll.endSuccess(curPageLength)
			},
			load() {
				this.load1()
				this.load2()
				this.load3()
			},
			async load1() {
				let api;
				if (this.type == 'nottoday') {
					api = childleveltotal;
				} else {
					api = childlevel;
				}
				let result = await api({
					level: this.level
				})
				this.distribution = result.reverse();

				for (let i of result) {
					if (this.distributionMax < parseFloat(i.value)) {
						this.distributionMax = i.value;
					}
				}
			},
			async load2() {
				let api;
				if (this.type == 'nottoday') {
					api = childlevelsurpasstotal;
				} else {
					api = childlevelsurpass;
				}
				let result = await api({
					level: this.level
				})
				this.unearned = result.list.reverse();
				this.unearnedTotal = result.total;
				for (let i of result.list) {
					if (this.unearnedMax < parseFloat(i.commission)) {
						this.unearnedMax = i.commission;
					}
				}
			},
			async load3() {
				let api;
				if (this.type == 'nottoday') {
					api = childlevelsurpassstotal;
				} else {
					api = childlevelsurpasss;
				}
				let result = await api({
					level: this.level
				})
				this.after = result.reverse();
			},
			navTo(val) {
				uni.navigateTo({
					url:val
				})
			},
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss" scoped>
	.main {
		padding: 0 30rpx 88rpx;
	}
	.main-box {
		margin-top: 30rpx;
		text-align: center;
		border-radius: 20rpx;
		padding: 30rpx;
		background: #FFF;
		.header {
			display: flex;
			align-items: center;
			.circle {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				border: 6rpx solid $u-type-primary;
			}
			.title {
				text-align: start;
				margin-left: 14rpx;
				font-size: 32rpx;
				font-weight: 400;
				flex:1;
			}
		}
		
		.item-box {
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.my-line {
				margin: 20rpx 0;
				width: 100%;
				height: 6rpx;
				border-bottom: 6rpx dashed #ECECEC;
				position: relative;
				.me-icon {
					position: absolute;
					color:#AAAAAA;
					top:-32rpx;
					right: 0;
				}
			}
			.item {
				margin-bottom:30rpx;
				display: flex;
				align-items: center;
				padding: 0 0rpx 0 0;
				.level {
					margin-right: 20rpx;
					color: #AAAAAA;
					font-size: 30rpx;
				}
				.progress-line {
					border-radius: 6rpx;
					height: 12rpx;
					overflow: visible;
					background: red;
					position: relative;
					.person-icon {
						width: 91rpx;
						height: 28rpx;
						border-radius: 16rpx;
						border: 2rpx solid #FFF;
						position: absolute;
						background: red;
						line-height: 28rpx;
						font-size: 26rpx;
						color:#FFF;
						top: -8rpx;
						text-align: center;
						right: -85rpx;
					}
					
				}
			}
			.item-line {
				padding: 0 85rpx 0 0;
			}
		}
	}
</style>
